/*
 * @Descripttion: 
 * @Author: xgh
 * @Date: 2022-09-06 16:11:15
 * @LastEditors: xgh
 * @LastEditTime: 2022-09-09 16:43:44
 */

/* 车辆大屏信息 */
import React,{useState,useEffect} from 'react'
import carImg from '@/assets/img/car.jpg'
import '@/assets/less/carinfo.less'
import { Carousel } from 'antd'
function CarInfo(props) {
  let { 
        carInfo,
        currentPageInfo,
        isShow =()=>{}
      } = props
  let [carData,setCarData]=useState({})
  useEffect(() => {
    setCarData(carInfo)
  }, [])

  const hidden_info=()=>{
    isShow("none")
  }
  // 点击更新车辆信息
  const changeCarInfoHandle=(value)=>{
    setCarData(value)
  }
  return (
    <div className='show_car_info'>
      <p className='hidden_info' onClick={hidden_info}>x</p>
      <div className='car_info_content'>
        <div className='car_info_content_img'>
          <img src={carData.vehicle_img || carImg} alt="" />
        </div>
        <div className='car_info_content_info'>
          <div className='farture'>
            <table >
              <tr>
                <td>车牌号</td>
                <td>{carData.plate_number}</td>
              </tr>
              <tr>
                <td>车牌颜色</td>
                <td>{carData.plate_color}</td>
              </tr>
              <tr>
                <td>识别车型</td>
                <td>{carData.vehicle_type}</td>
              </tr>
              <tr>
                <td>车辆位置</td>
                <td>{carData.point}</td>
              </tr>
              <tr>
                <td>录入时间</td>
                <td>{carData.entry_time}</td>
              </tr>
              <tr>
                <td>车辆颜色</td>
                <td>{carData.vehicle_color}</td>
              </tr>
              <tr>
                <td>天窗</td>
                <td>{carData.skylight===0 ? "有" :"无"}</td>
              </tr>
              <tr>
                <td>行李架</td>
                <td>{carData.roof_rack === 0 ? "有" : "无"}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div className='current_page_img'>
        {
          currentPageInfo.map((item,index)=>{
            return(
              <div key={index} className="car_img">
                <img src={item.vehicle_img || carImg} alt="" onClick={() => changeCarInfoHandle(item)}/>
              </div>
            )
          })
        }
    </div>
    </div>
  )
}

export default CarInfo
